import React, { FC, Fragment } from 'react';
import { Col } from 'antd';
import BlockItem, { BlockItemProps } from './BlockItem';

interface ColorBlocksProps {
  /** 色块配置列表 */
  cfgList: Array<BlockItemProps>;
  /** 色块数目 */
  number: number;
  /** 色块margin */
  margin: number;
}

const ColorBlocks: FC<ColorBlocksProps> = (props) => {
  const { cfgList = [], number = 3, margin = 20 } = props;

  const width = `calc((100% - ${number - 1} * ${margin}px) / ${number})`;

  return (
    <Fragment>
      {cfgList.map((cfg: BlockItemProps, index: number) => (
        <Col
          key={`color-block-${index}`}
          style={{
            width: `${width}`,
            display: 'inline-block',
            marginRight: `${(index + 1) % number !== 0 ? `${margin}px` : '0px'}`,
            marginTop: `${index + 1 > number ? `${margin}px` : '0px'}`,
          }}
        >
          <BlockItem {...cfg}></BlockItem>
        </Col>
      ))}
    </Fragment>
  );
};

export default ColorBlocks;
